<template>
  <a-modal
    :width='800'
    :visible='visible'
    :confirm-loading='loading'
    :forceRender="true"
    :title="isUpdate ? '修改' : '新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible='updateVisible'
    @ok='save'
  >
    <a-form
      ref='form'
      :model='form'
      :rules='rules'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >
      <a-form-item label='日期:' name='usageDate'>
        <a-date-picker v-model:value='form.usageDate' format='YYYY-MM-DD' valueFormat='YYYY-MM-DD' placeholder='请选择日期'/>
      </a-form-item>
      <a-form-item label='时间点:' name='timePoint'>
        <a-input-number v-model:value='form.timePoint' placeholder='请输入时间点' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='时间段:' name='timeSlot'>
        <a-input v-model:value='form.timeSlot' placeholder='请输入时间段' allow-clear autocomplete='off' />
      </a-form-item>
      <a-form-item label='直调负荷:' name='powerDirectLoad'>
        <a-input-number v-model:value='form.powerDirectLoad' placeholder='请输入直调负荷' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='地方电厂发电总加:' name='powerLocalGeneration'>
        <a-input-number v-model:value='form.powerLocalGeneration' placeholder='请输入地方电厂发电总加' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='联络线受电负荷:' name='powerInterconnectionLoad'>
        <a-input-number v-model:value='form.powerInterconnectionLoad' placeholder='请输入联络线受电负荷' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='风电总加:' name='powerWindGeneration'>
        <a-input-number v-model:value='form.powerWindGeneration' placeholder='请输入风电总加' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='光伏总加:' name='powerSolarGeneration'>
        <a-input-number v-model:value='form.powerSolarGeneration' placeholder='请输入光伏总加' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='非市场化核电总加:' name='powerNuclearGeneration'>
        <a-input-number v-model:value='form.powerNuclearGeneration' placeholder='请输入非市场化核电总加' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='自备机组总加:' name='powerSelfGeneration'>
        <a-input-number v-model:value='form.powerSelfGeneration' placeholder='请输入自备机组总加' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
      <a-form-item label='实验机组总加:' name='powerExperimentalGeneration'>
        <a-input-number v-model:value='form.powerExperimentalGeneration' placeholder='请输入实验机组总加' allow-clear autocomplete='off' style="width: 100%" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { message } from 'ant-design-vue';
import { QyuanPowerSdGridForecastApi } from '@/api/qyuanPowerSdGridForecast/QyuanPowerSdGridForecastApi';

export default {
  name: 'QyuanPowerSdGridForecastEdit',
  components: {
  },
  emits: ['done', 'update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.data),
      // 表单验证规则
      rules: {
        usageDate: [{ required: true, message: '请输入日期', type: 'string', trigger: 'blur' }],
        timePoint: [{ required: true, message: '请输入时间点', type: 'number', trigger: 'blur' }],
        timeSlot: [{ required: true, message: '请输入时间段', type: 'string', trigger: 'blur' }],
        powerDirectLoad: [{ required: true, message: '请输入直调负荷', type: 'string', trigger: 'blur' }],
        powerLocalGeneration: [{ required: true, message: '请输入地方电厂发电总加', type: 'string', trigger: 'blur' }],
        powerInterconnectionLoad: [{ required: true, message: '请输入联络线受电负荷', type: 'string', trigger: 'blur' }],
        powerWindGeneration: [{ required: true, message: '请输入风电总加', type: 'string', trigger: 'blur' }],
        powerSolarGeneration: [{ required: true, message: '请输入光伏总加', type: 'string', trigger: 'blur' }],
        powerNuclearGeneration: [{ required: true, message: '请输入非市场化核电总加', type: 'string', trigger: 'blur' }],
        powerSelfGeneration: [{ required: true, message: '请输入自备机组总加', type: 'string', trigger: 'blur' }],
        powerExperimentalGeneration: [{ required: true, message: '请输入实验机组总加', type: 'string', trigger: 'blur' }]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  watch: {
    visible() {
      if (this.visible) {
        if (this.data) {
          this.form = Object.assign({}, this.data);
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
        }
        if (this.$refs.form) {
          this.$refs.form.clearValidate();
        }
      }
    }
  },
  methods: {
    /**
     * 保存和编辑
     *
     * @author 我是谭先生🐻
     * @date 2025/03/14 10:41
     */
    async save() {
      // 校验表单
      await this.$refs.form.validate();

      // 修改加载框为正在加载
      this.loading = true;

      let result = null;

      // 执行编辑或修改
      if (this.isUpdate) {
        result = QyuanPowerSdGridForecastApi.edit(this.form);
      } else {
        result = QyuanPowerSdGridForecastApi.add(this.form);
      }
      result
        .then(result => {
          // 移除加载框
          this.loading = false;

          // 提示添加成功
          message.success(result.message);

          // 如果是新增，则form表单置空
          if (!this.isUpdate) {
            this.form = {};
          }

          // 关闭弹框，通过控制visible的值，传递给父组件
          this.updateVisible(false);

          // 触发父组件done事件
          this.$emit('done');
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 更新编辑界面的弹框是否显示
     *
     * @param value true-显示，false-隐藏
     * @author 我是谭先生🐻
     * @date 2025/03/14 10:41
     */
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
};
</script>
